<template>
  <div class="fillcontain">
    <div class="contain" ref="contain">
      <el-row type="flex">
        <el-col>共{{ page.total }}名员工</el-col>
        <el-button size="small" type="primary" @click="showDialog = true"
          >新增员工</el-button
        >
      </el-row>
      <!-- 表格 -->
      <el-card>
        <el-table :data="list">
          <!-- prop属性 -->
          <!-- type=index表示索引下标 + 1 -->
          <el-table-column label="序号" sortable="" type="index" />
          <el-table-column label="姓名" sortable="" prop="username" />
          <el-table-column label="手机号" sortable="" prop="mobile" />
          <el-table-column label="工号" sortable="" prop="workNumber" />
          <el-table-column label="部门" sortable="" prop="departmentName" />
          <el-table-column label="入职时间" sortable="" prop="timeOfEntry">
            <!-- 传入插槽- 作用域插槽 -->
            <template v-slot="{ row }">
              <!-- 过滤器   表达式值 | 过滤器 -->
              <!-- 过滤器想要传参？？？ -->
              {{ row.timeOfEntry }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="280">
            <!-- <template slot-scope="{ row }"> -->
            <template v-slot="{ row }">
              <!-- 放置按钮 -->
              <el-button size="small" type="text" @click="editRole(row.id)"
                >角色</el-button
              >
              <el-button
                size="small"
                type="text"
                @click="deleteEmployee(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row
          style="height: 80px"
          type="flex"
          justify="center"
          align="middle"
        >
          <!-- 放置分页组件 -->
          <!-- layout表示分页组件要显示部件内容 -->
          <el-pagination
            :total="page.total"
            :current-page="page.page"
            :page-size="page.pagesize"
            background
            layout="prev,pager,next"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
      <AddEmpoyees :show-dialog.sync="showDialog" />
      <AsspnRow
        ref="assignRole"
        :show-role-dialog.sync="showRoleDialog"
        :user-id="userId"
      />
    </div>
  </div>
</template>
<script>
import AddEmpoyees from "./components/addEmpoyees.vue"; //点击添加框
import AsspnRow from "./components/asspn-row.vue"; // 角色权限
export default {
  components: {
    AddEmpoyees,
    AsspnRow,
  },
  data() {
    return {
      list: [
        {
          correctionTime: "2020-01-01",
          departmentName: "总裁办",
          formOfEmployment: 1,
          id: "604f764971f93f3ac8f365cb",
          mobile: "13600000002",
          password: "e10adc3949ba59abbe56e057f20f883e",
          staffPhoto: "",
          timeOfEntry: "1993-08-04",
          username: "袁永安",
          workNumber: "0002",
        },
      ],
      // 员工信息,
      page: {
        // 放置页码及相关数据
        page: 1,
        pagesize: 20,
        total: 0, // 记录总数
      },
      loading: false, //弹出层
      showDialog: false,
      showCodeDialog: false,
      showRoleDialog: false, // 控制角色分配弹层的显示
      userId: null, // 记录当前用户点击的id
    };
  },
  created() {
    // this.getEmployeeList()
  },
  methods: {
    async getEmployeeList() {
      // this.loading = true
      // const { total, rows } = await getEmployeeList(this.page)
      // this.page.total = total
      // // rows就是当前整页的数据
      // this.list = rows
      // await new Promise(resolve => setTimeout(() => resolve(), 300))
      // this.loading = false
    },
    // 切换页码
    changePage(newPage) {
      // this.page.page = newPage
      // this.getEmployeeList()
    },
    async deleteEmployee(id) {
      try {
        await this.$confirm("您确定删除该员工吗");
        // await delEmployee(id)
        // this.getEmployeeList()
        this.$message.success("删除员工成功");
      } catch (error) {}
    },
    showQrCode(url) {
      // if (url) {
      //   // 当有url地址的情况下
      //   this.showCodeDialog = true // 打开弹层- 立刻渲染？渲染是异步的
      //   // toCanvas(dom, info)
      //   // 应该等到上次的数据更新完成之后 再去进行获取dom 此时才可以进行
      //   // this.$nextTick() 传入回调函数 vue渲染异步的
      //   this.$nextTick(() => QrCode.toCanvas(this.$refs.myCanvas, url)) // 转化二维码
      // } else {
      //   this.$message.warning('你还未上传头像')
      // }
    },
    // 此时id就是编辑的用户的id
    async editRole(id) {
      this.userId = id; // 记录当前点击的用户id
      // 可以通过此id进行获取当前用户所拥有的角色
      // 父组件调用子组件方法
      await this.$refs.assignRole.getUserDetailById(id); // 调用子组件方法
      this.showRoleDialog = true; // 分配角色窗口弹出
    },
  },
};
</script>

<style lang="less" scoped>
.contain {
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}
</style>
